<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>web前端培训</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/train.css">
    <link rel="stylesheet" href="./css/job.css">
    <link rel="stylesheet" href="./css/iconfonts.css">
    <link rel="stylesheet" href="./css/foot.css">
    <link rel="stylesheet" href="./css/navright.css">
</head>

<body>

    <div class="trainheader">
        <div class="navtop ">
            <div class="nav mg">
                <ul class="leftnavtop ">
                    <li><a href="../index.html">慕课网首页</a></li>
                    <li><a href="./free.html">免费课程</a></li>
                    <li><a href="./free.html">实战课程</a></li>
                    <li><a href="./job.html" class="only">就业班</a></li>
                    <li><a href="#">猿问</a></li>
                    <li><a href="./node.html">手记</a></li>
                    <li><a href="./recruit.html">猿聘</a></li>
                </ul>
                <ul class="rightnavtop ">
                    <li>
                        <a href="./download.html">下载App
                            <div class="download">
                                <div class="topdown">
                                    <div class="first">
                                        <p>慕课网浏览器-pc客户端</p>
                                        <p class="radius"><i class="icon iconfont icon-windows"></i> Windows版</p>
                                        <p>Mac版开发中，敬请期待...</p>
                                    </div>
                                </div>
                                <div class="botdown">
                                    <p>慕课网App-随时随地学编程</p>
                                    <div class="appdown clearfix">
                                        <div class="appcode fl">
                                            <img src="./img/free/code.png" alt="">
                                        </div>
                                        <div class="appurl fr">
                                            <p class="radiu"><i class="icon iconfont icon-ios"></i> App Store下载</p>
                                            <p class="radiu"><i class="icon iconfont icon-anzhuo"></i> Android下载</p>
                                            <p>扫描下载慕课网APP</p>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="gouwuche icon iconfont icon-gouwucheman"></i>
                            购物车
                            <div class="addcar">
                                <div class="mycar">
                                    <span>我的购物车</span>
                                    <span>已加入0门课程</span>
                                </div>
                                <hr>
                                <div class="concar">
                                    <p class="icon iconfont icon-gouwucheman"></p>
                                    <p>购物车里空空如业</p>
                                    <p>快去这里选购物你中意的课程</p>
                                    <p class="red">实战课程</p>
                                    <p class="red">就业班</p>
                                </div>
                                <hr>
                                <div class="footcar">
                                    <span>我的订单中心</span>
                                    <span>去购物车</span>
                                </div>
                            </div>
                        </a>

                    </li>
                    <li><a href="#">登录</a>/<a href="#">注册</a></li>
                </ul>

            </div>

        </div>
        <div class="navbot">
            <div class="job-banner">
                <div class="job-banner-top">
                    <div class="type">
                        <a href="#" class="logo">
                            <img src="./img/job/log.png" alt="">
                        </a>
                        <div class="option">
                            <p>前端开发工程师</p>
                            <ul class="optionlist">
                                <li>
                                    <p>前端开发工程师</p>
                                    <p>投入小，赚钱快，人才需求量大，互联网必备</p>
                                </li>
                                <li>
                                    <p>Java开发工程师</p>
                                    <p>埋头码当下，高薪看Java，大数据时代，称霸职场</p>
                                </li>
                                <li>
                                    <p>Android开发工程师</p>
                                    <p>平台好，人才缺，移动互联网如日中天，前程似锦</p>
                                </li>
                                <li>
                                    <p>PHP开发工程师</p>
                                    <p>学世界上最好的编程语言，走入程序员的红海</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="share">
                        <span class="icon iconfont icon-weixin"></span>
                        <span class="icon iconfont icon-weibo"></span>
                        <span class="icon iconfont icon-QQ"></span>
                    </div>
                </div>
                <div class="txt">
                    <p class="issue">前端开发大势所趋，行业红利唾手可得！</p>
                    <h3>前端攻城狮，实现互联网+上你所看见的一切</h3>
                    <div class="case">
                        <ul class="caselist">
                            <li>
                                实战案例<br>
                                均选自企业真实项目
                            </li>
                            <li class="line">
                                /
                            </li>
                            <li>
                                学以致用<br>
                                接轨企业用人需求
                            </li>
                            <li class="line">
                                /
                            </li>
                            <li>
                                一线互联网技术<br>
                                大咖倾囊相授
                            </li>
                            <li class="line">
                                /
                            </li>
                            <li>
                                超过1400W的用户<br>
                                在慕课网学习
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="immediately">
                    立即学习
                </div>
            </div>
        </div>
    </div>
    <div class="traincon">
        <div class="need">
            <div class="needtitle">
                <h3>一个“需求大，薪资涨幅快”的职位，前端工程师</h3>
                <p>每天2小时，3个月，轻松挑战20W年薪</p>
            </div>
            <div class="needcon">
                <ul class="needlist">
                    <li>
                        <p>简单<br>易学</p>
                        <p>语法简单、可以说是最容易进入IT行业的一个编程方向</p>
                    </li>
                    <li>
                        <p>使用<br>广泛</p>
                        <p>PC页面、移动端界面、小程序微信公众号，都可以用前端</p>
                    </li>
                    <li>
                        <p>职业<br>道路多</p>
                        <p>互联网上看到的一切都是前端工程师开发实现的，就业前景广阔</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="stage">
            <h2>四个阶段，实现前端工程师 从入门到入职</h2>
            <div class="positionstage">
                <div class="line"></div>
                <ul class="stagelist">
                    <li>
                        <p><img src="./img/train/stage1.png" alt=""></p>
                        <h4>前端零基础入门</h4>
                        <p>5步骤/33门课 · 52小时</p>
                        <p>从零基础开始一步步带你入门，掌握企业常见网页布局和特效，是通向合格前端工程师的必修课。</p>
                        <p>了解更多</p>
                    </li>
                    <li>
                        <p><img src="./img/train/stage2.png" alt=""></p>
                        <h4>响应式开发与常用框架</h4>
                        <p>5步骤/33门课 · 52小时</p>
                        <p>网页如何在不同设备展示，如何使效果炫酷，使用户体验更美，从此刻你将开始体验到“框架”的妙用哦。</p>
                        <p>了解更多</p>
                    </li>
                    <li>
                        <p><img src="./img/train/stage3.png" alt=""></p>
                        <h4>组件化思想 开发电商网页</h4>
                        <p>5步骤/33门课 · 52小时</p>
                        <p>如何完成高性能网页的搭建?本阶段将学习企业化的开发模式----“组件化”，这个阶段，将是你从“会”，到“好”，到“快”的一次转变。</p>
                        <p>了解更多</p>
                    </li>
                    <li>
                        <p><img src="./img/train/stage4.png" alt=""></p>
                        <h4>热门框架Vue开发WebApp</h4>
                        <p>5步骤/33门课 · 52小时</p>
                        <p>本阶段，将教你使用流行的前端框架，结合多个实战案例.</p>
                        <p>了解更多</p>
                    </li>
                </ul>
            </div>
            <div class="buy">
                <p>立即购买</p>
            </div>
            <div class="rise">
                <h3>以企业岗位需求为导向的前端加薪技能点</h3>
                <div class="bgtree">
                    <img src="./img/train/s2-tree4.png" alt="">
                </div>
            </div>
            <div class="study">
                <p>立即学习</p>
            </div>
        </div>
        <div class="fourstage">
            <h3>没有真实项目案例的教学，都是耍流氓</h3>
            <div class="firststage clearfix">
                <div class="leftstage fl">
                    <h4>阶段一 · 前端零基础入门</h4>
                    <div>
                        <p>教学目标</p>
                        <p>从前端基础入门知识学起，掌握基本的HTML+CSS网页布局，以及简单的JS特效，最终可以独立开发出前端PC网页。</p>
                        <p>项目案例</p>
                        <p>
                            <strong>统一挂号平台</strong>
                            <span> — 完成包含轮播特效、分页技术、导航菜单、下拉菜单特效的网页布局。最终掌握网页开发流程、以及HTML+CSS+JS的系统布局。 </span>
                        </p>
                        <p>
                            <strong>网页布局</strong>
                            <span> — 完成包含内容居中、导航菜单、图文混排等效果的HTML+CSS网页布局案例。掌握盒子模型、DIV+CSS布局、Float、Position。</span>
                        </p>
                        <p>
                            <strong>轮播特效</strong>
                            <span> — 完成网页中必备的特效——轮播图。掌握JS内置对
                                象、DOM事件、DOM元素操作。 </span>
                        </p>
                        <p>
                            <strong>弹出层</strong>
                            <span> — 完成网页常见特效——弹出层，掌握网页居中、透明度、层级控制、jQuery事件、jQuery元素获取。</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="firststage clearfix">
                <div class="leftstage fl">
                    <h4>阶段二 · 响应式开发与常用框架</h4>
                    <div>
                        <p>教学目标</p>
                        <p>从前端基础入门知识学起，掌握基本的HTML+CSS网页布局，以及简单的JS特效，最终可以独立开发出前端PC网页。</p>
                        <p>项目案例</p>
                        <p>
                            <strong>统一挂号平台</strong>
                            <span> — 完成包含轮播特效、分页技术、导航菜单、下拉菜单特效的网页布局。最终掌握网页开发流程、以及HTML+CSS+JS的系统布局。 </span>
                        </p>
                        <p>
                            <strong>网页布局</strong>
                            <span> —完成包含内容居中、导航菜单、图文混排等效果的HTML+CSS网页布局案例。掌握盒子模型、DIV+CSS布局、Float、Position。</span>
                        </p>
                        <p>
                            <strong>轮播特效</strong>
                            <span> — 完成网页中必备的特效——轮播图。掌握JS内置对
                                象、DOM事件、DOM元素操作。 </span>
                        </p>
                        <p>
                            <strong>弹出层</strong>
                            <span> — 完成网页常见特效——弹出层，掌握网页居中、透明度、层级控制、jQuery事件、jQuery元素获取。</span>
                        </p>
                    </div>
                </div>
                <div class="rightstage">

                </div>
            </div>
            <div class="firststage clearfix">
                <div class="leftstage fl">
                    <h4>阶段三 · 组件化思想开发电商网页</h4>
                    <div>
                        <p>教学目标</p>
                        <p>从前端基础入门知识学起，掌握基本的HTML+CSS网页布局，以及简单的JS特效，最终可以独立开发出前端PC网页。</p>
                        <p>项目案例</p>
                        <p>
                            <strong>统一挂号平台</strong>
                            <span> — 完成包含轮播特效、分页技术、导航菜单、下拉菜单特效的网页布局。最终掌握网页开发流程、以及HTML+CSS+JS的系统布局。 </span>
                        </p>
                        <p>
                            <strong>网页布局</strong>
                            <span> —完成包含内容居中、导航菜单、图文混排等效果的HTML+CSS网页布局案例。掌握盒子模型、DIV+CSS布局、Float、Position。</span>
                        </p>
                        <p>
                            <strong>轮播特效</strong>
                            <span> — 完成网页中必备的特效——轮播图。掌握JS内置对
                                象、DOM事件、DOM元素操作。 </span>
                        </p>
                        <p>
                            <strong>弹出层</strong>
                            <span> — 完成网页常见特效——弹出层，掌握网页居中、透明度、层级控制、jQuery事件、jQuery元素获取。</span>
                        </p>
                    </div>
                </div>
                <div class="rightstage">

                </div>
            </div>
            <div class="firststage clearfix">
                <div class="leftstage fl">
                    <h4>阶段四 · 热门框架Vue开发WebApp</h4>
                    <div>
                        <p>教学目标</p>
                        <p>从前端基础入门知识学起，掌握基本的HTML+CSS网页布局，以及简单的JS特效，最终可以独立开发出前端PC网页。</p>
                        <p>项目案例</p>
                        <p>
                            <strong>统一挂号平台</strong>
                            <span> — 完成包含轮播特效、分页技术、导航菜单、下拉菜单特效的网页布局。最终掌握网页开发流程、以及HTML+CSS+JS的系统布局。 </span>
                        </p>
                        <p>
                            <strong>网页布局</strong>
                            <span> —完成包含内容居中、导航菜单、图文混排等效果的HTML+CSS网页布局案例。掌握盒子模型、DIV+CSS布局、Float、Position。</span>
                        </p>
                        <p>
                            <strong>轮播特效</strong>
                            <span> — 完成网页中必备的特效——轮播图。掌握JS内置对
                                象、DOM事件、DOM元素操作。 </span>
                        </p>
                        <p>
                            <strong>弹出层</strong>
                            <span> — 完成网页常见特效——弹出层，掌握网页居中、透明度、层级控制、jQuery事件、jQuery元素获取。</span>
                        </p>
                    </div>
                </div>
                <div class="rightstage">

                </div>
            </div>
            <div class="more">
                <p>立即学习</p>
            </div>
        </div>
        <div class="system">
            <div class="systemcon">
                <h3>近乎完美的课程学习保障体系</h3>
                <ul class="systemlist">
                    <li>
                        <div class="num">
                            18
                        </div>
                        <p>
                            18套阶段性测试，多角度全方位 了解所学知识的掌握情况
                        </p>
                    </li>
                    <li>
                        <div class="num">
                            28
                        </div>
                        <p>
                            28个实操案例，将所学知识串 联，学以致用，积累项目经验
                        </p>
                    </li>
                    <li>
                        <div class="num">
                            1700
                        </div>
                        <p>
                            1700+练习题，巩固所学重难点 知识，不怕遗忘
                        </p>
                    </li>
                    <li>
                        <div class="num">
                            40000
                        </div>
                        <p>
                            专业的服务团队，累计实现4万
                            以上数量的问题答疑
                        </p>
                    </li>
                    <li>
                        <div class="num">
                            60000
                        </div>
                        <p>
                            学完该路径，完成60000+行的代码编写量，入职企业不是梦
                        </p>
                    </li>
                </ul>

            </div>
        </div>
        <div class="job-con">
            <div class="difference">
                <h2>与别的培训不同，我们更在意你的学习质量！</h2>
                <p>虚假承诺、乱画大饼的培训多如牛毛，我们不同，我们更专注于是否能让你学到真东西！</p>
                <!--线上线下培训的优缺点-->
                <div class="train">
                    <div class="trains">
                        <h2>线下培训</h2>
                        <ul class="trainlist">
                            <li v-for="(item,index) in first" :key="index">
                                <i class="icon iconfont icon-yijin14-cai"></i>
                                <p>{{item.con}}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="trains">
                        <h2>“有的”线上培训</h2>
                        <ul class="trainlist">
                            <li v-for="(item,index) in second" :key="index">
                                <i class="icon iconfont icon-yijin14-cai"></i>
                                <p>{{item.con}}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="trains">
                        <h2>慕课网就业班</h2>
                        <ul class="trainlist">
                            <li v-for="(item,index) in third" :key="index">
                                <i class="icon iconfont icon-weibiaoti--"></i>
                                <p>{{item.con}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--为什么慕课网就业班课程能让你学会-->
            <div class="describe">
                <h2>为什么慕课网就业班课程能让你学会</h2>
                <ul class="deslist">
                    <li v-for="(item,index) in study" :key="index">
                        <img :src="item.pic" alt="">
                        <p>{{item.title}}</p>
                        <p>{{item.con}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <!--36442名同学与你一起学习-->
        <div class="student">
            <h2>36442名同学与你一起学习</h2>
            <div class="stulist " >
                <ul class=" studentlist" id="banner">
                    <li v-for="
                (item,index) in student" :key="index">
                <div class="portrait"><img :src="item.pic" alt=""></div>
                <p>{{item.name}}</p>
                <!--<div class="test1"></div>-->
                <p class="studentcon">{{item.content}}</p>
                </li>
                </ul>
                <div class="btn">
                    <button class="prev" @click="prev" id="prev"> < </button>
                    <button class="next" @click="next" id="next"> > </button> 
                </div>
            </div>
            
            <ul class="circle">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 侧边栏 -->
        <div class="right-nav">
            <ul>
                <li><i class="iconfont icon-fankui"></i><span>意见反馈</span></li>
                <li><i class="iconfont icon-bangzhu"></i><span>帮助中心</span></li>
                <li><i class="iconfont icon-diedaisanicon45"></i><span>app下载</span>
                    <div class="qcrapp"></div>
                </li>
                <li><i class="iconfont icon-Wchat"></i><span>官方微信</span>
                    <div class="qcrw"></div>
                </li>
                <li id="goTop" @click="backTop" :class="{'backShow':isShow}"><i class="iconfont icon-icon"></i><span>返回顶部</span></li>
            </ul>
        </div>
    </div>
    <!--底部-->
    <div class="footer">
        <div class="foots">
            <div class="foot">
                <ul class="footlist">
                    <li>网站首页</li>
                    <li>网站首页</li>
                    <li>企业合作</li>
                    <li>人才招聘</li>
                    <li>联系我们</li>
                    <li>讲师招募</li>
                    <li>常见问题</li>
                    <li>意见反馈</li>
                    <li>慕课大学</li>
                    <li>友情链接</li>
                </ul>
                <p>Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 12003892号-11</p>
            </div>
            <div class="footpic">
                <span></span>
                <p class="mkwcode"></p>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <script src="./js/jobdata.js"></script>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: ".traincon",
            data() {
                return {
                    first: [],
                    second: [],
                    third: [],
                    study: [],
                    student: [],
                    index: 0,
                    clientH: 0,
                    isShow: false,
                }
            },
            methods: {
                prev() {
                    let prev = document.querySelector("#prev");
                    let aBanner = document.querySelector("#banner");
                    let oLi = document.querySelectorAll(".circle>li");
                    this.index--;
                    if (this.index >= 0) {
                        console.log(this.index);
                        aBanner.style.left = -1200 * this.index + "px"
                        oLi[this.index + 1].className = ""
                        oLi[this.index].className = "active";

                    } else {
                        this.index = 4;
                        aBanner.style.left = -1200 * this.index + "px";
                        oLi[0].className = ""
                        oLi[this.index].className = "active";
                    }

                },
                next() {
                    let next = document.querySelector("#next");
                    let aBanner = document.querySelector("#banner");
                    let oLi = document.querySelectorAll(".circle>li");
                    let num = 4;
                    // console.log(oLi);
                    // console.log(this.index);
                    this.index++;

                    if (this.index <= num) {
                        aBanner.style.left = -1200 * this.index + "px"
                        oLi[this.index - 1].className = "";
                        oLi[this.index].className = "active"
                        // this.index++; 

                    } else {
                        this.index = 0
                        aBanner.style.left = 0;
                        oLi[num].className = "";
                        oLi[this.index].className = "active"
                    }

                },
                handleScrool() {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                    if (scrollTop > this.clientH) {
                        this.isShow = true;
                    } else {
                        this.isShow = false;
                    }
                },
                backTop() {
                    let timer = '';
                    clearInterval(timer)
                    timer = setInterval(() => {
                        document.documentElement.scrollTop -= 100;
                        if (document.documentElement.scrollTop == 0) {
                            clearInterval(timer)
                        }

                    }, 10);
                }
            },
            mounted() {
                this.clientH = document.documentElement.clientHeight;
                window.addEventListener('scroll', this.handleScrool);
            },
            destroyed() {
                window.removeEventListener('scroll', this.handleScrool)
            },
            created() {
                this.first = first;
                this.second = second;
                this.third = third;
                this.study = study;
                this.student = student;
                console.log(student)

            },

        })
    </script>
</body>

</html>